<template>
  <div>
    <div class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>自定义名称</p>
          <el-input size="mini" clearable />
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>考勤签到积分</p>
          <el-input size="mini" clearable />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>考勤无故缺席扣除积分</p>
          <el-input size="mini" clearable />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>考勤事假缺席扣除积分</p>
          <el-input size="mini" clearable />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>考勤病假缺席扣除积分</p>
          <el-input size="mini" clearable />
        </el-col>
      </el-row>
    </div>
    <p class="points" style="margin-bottom:10px">积分评价：</p>
    <span style="color:red">备注：若设置的为负数，教练评价后将以该值的绝对值减少该学员的积分</span>
    <el-form ref="starRating" v-model="starRating" class="gl_form_mini pointsForm" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="一星:">
            <el-input v-model="starRating.ondStar" placeholder="请输入评价积分" size="mini" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-star-off" />
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="二星:">
            <el-input v-model="starRating.twoStar" placeholder="请输入评价积分" size="mini" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-star-off" />
          <i class="el-icon-star-off" />
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="三星:">
            <el-input v-model="starRating.threeStar" placeholder="请输入评价积分" size="mini" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-star-off" />
          <i class="el-icon-star-off" />
          <i class="el-icon-star-off" />
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="四星:">
            <el-input v-model="starRating.fourStar" placeholder="请输入评价积分" size="mini" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-star-off" />
          <i class="el-icon-star-off" />
          <i class="el-icon-star-off" />
          <i class="el-icon-star-off" />
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item label="五星:">
            <el-input v-model="starRating.fiveStar" placeholder="请输入评价积分" size="mini" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-star-off" />
          <i class="el-icon-star-off" />
          <i class="el-icon-star-off" />
          <i class="el-icon-star-off" />
          <i class="el-icon-star-off" />
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('starRating')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'StudentCard',

  data() {
    return {
      starRating: {
        oneStar: '',
        twoStar: '',
        threeStar: '',
        fourStar: '',
        fiveStar: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log(this.starRating);
    }
  }
};
</script>
<style scoped>
.pointsForm{
  margin-top:20px;
}
.pointsForm i{
  margin-top:10px;
}
</style>
